<template>
	<view class="container bg-color-item">
		<!-- <w-big-title title="请选择合成方式"></w-big-title> -->
		<view class="item flex flex-ai-center mb-12 br-12" v-for="item in list" :key="item.id">
		
			<view class="content">
				<view class="name">{{ item.title }}</view>
				<view class="time">
					
					{{ $u.timeFormat(item.real_start_time, 'mm/dd hh:MM') }} -
					{{ $u.timeFormat(item.real_end_time, 'mm/dd hh:MM') }}
				</view>
				<view class="flex mt-8">
					<block v-if="getStatus(item.start_time,item.end_time).status==1 && item.stock!=0">
						<w-button class="btnStyle" @click="$u.throttle(()=>{ confim(item) }, 500)">{{handleLang(getBtnText(item))}}</w-button>
					</block>
					<view class="status status_active" v-if="item.stock==0">{{handleLang('已结束')}}</view>
					<view class="status"
						:class="{ 'status_active':getStatus(item.real_start_time,item.real_end_time).status==2 }" v-else>
						{{ handleLang(getStatus(item.real_start_time,item.real_end_time).text) }}
						<u-count-down v-if="getStatus(item.real_start_time,item.real_end_time).status==0"
							:time="new Date(item.real_start_time).getTime() - nowTimestamp"></u-count-down>
					</view>
					<view class="font-size-12 font-w-500 font-color-textPrimary"
						v-if="getStatus(item.start_time,item.end_time).status==0">{{handleLang('敬请期待')}}</view>
				</view>
			</view>
			<w-image :src="item.image" width="120" height="120" radius="12"></w-image>
		</view>

		<!-- 暂无资格 -->
		<w-toast v-model="show" :content="handleLang('您未获得合成资格')" contentAlign="center"></w-toast>

		<!-- 选择材料 -->
		<w-popup-bottom v-model="showPop" class="bottom_warp" :title="handleLang('请选择合成材料')">
			<view class="schemeList">
				<view class="item ptb-10 gap-10" v-for="item in materialsList" :key="item.grp">
					<text class="font-size-14 font-color-textPrimary"
						style="text-align: justify;">{{ handleLang(item.title) }}</text>
					<w-button type="colorful" class="btnStyle"
						@click="$u.route('/pages/compound/newSchemeDetails',{play_id:item.play_id,classify:pop_classify,grp:item.grp})">{{handleLang('选择')}}</w-button>
				</view>
			</view>
		</w-popup-bottom>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import {
		material
	} from '@/api/compound/index.js'
	export default {
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		computed: {
			...mapState('config', ['nowTimestamp']),
			getStatus() {
				return function(start, end) {
					// 0活动倒计时 1活动进行中 2活动已结束
					let text = ['活动倒计时', '活动进行中', '已结束'];
					let status = this.$tools.checkTimeBetween(this.nowTimestamp, start, end)
					return {
						text: text[status],
						status
					}
				}
			}
		},
		mounted() {
			this.createNowTimeTimer()
		},
		data() {
			return {
				show: false,
				showPop: false,
				pop_classify: '',
				materialsList: [], //材料列表
			};
		},
		methods: {
			...mapActions('config', ['createNowTimeTimer']),

			// 获取活动状态
			// getStatus(start,end) {
			// 	// 0活动倒计时 1活动进行中 2活动已结束
			// 	let text = ['活动倒计时','活动进行中','活动已结束'];
			// 	let status = this.$tools.checkTimeBetween(this.nowTimestamp,start,end)
			// 	return { text:text[status],status }
			// },

			getBtnText(item) {
				if (item.classify == 'regular') {
					return '立即参与'
				} else if (item.classify == 'delay' && item.type == 10) {
					return '延时合'
				} else if (item.classify == 'advance' && item.type == 10) {
					return '提前合'
				} else if (item.classify == 'delay' && item.type == 20) {
					return '延时兑'
				} else if (item.classify == 'advance' && item.type == 20) {
					return '提前兑'
				}
			},

			// 立即参与
			confim(item) {
				uni.showLoading()
				material({
					play_id: item.id,
					classify: item.classify
				}).then(res => {
					this.materialsList = res.data
					if (res.data.length) {
						this.showPop = true;
						this.pop_classify = item.classify;
					}
				}).catch((err) => {
					console.log(err)
					err.code == '4003' && (this.show = true);
					err.code == '3003' && (uni.$u.route('/pages/compound/newSchemeDetails', {
						play_id: item.id,
						classify: item.classify,
						grp: ''
					}));
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		border-radius: 24rpx;
		@extend .pa-12;

		>.title {
			font-size: 32rpx;
			font-family: 'Alimama FangYuanTi VF, Alimama FangYuanTi VF';
			position: relative;
			z-index: 1;

			&::before {
				content: '';
				width: 40rpx;
				height: 16rpx;
				// background: linear-gradient(90deg, #DF0007 0%, rgba(0,102,254,0) 100%);
				position: absolute;
				left: 6rpx;
				bottom: 10rpx;
				z-index: -1;
			}
		}

		>.item {
			width: 100%;
			position: relative;
			background: #fff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding-left: 24rpx;

			>.status {
				width: auto;
				height: 44rpx;
				line-height: 44rpx;
				border-radius: 8px 0px 8px 0px;
				background: linear-gradient( 90deg, #FF7F43 0%, #FF2D23 100%);
				position: absolute;
				top: 0;
				left: 0;
				font-size: 20rpx;
				color: #fff;
				@extend .flex-center, .plr-8;

				/deep/ .u-count-down__text {
					font-size: 20rpx;
					color: #fff;
					margin-left: 8rpx;
				}
			}

			.status_active {
				width: 196rpx;
				height: 66rpx;
				background: #C9CCD3;
				border-radius: 34rpx 34rpx 34rpx 34rpx;
				text-align: center;
				line-height: 66rpx;
				font-family: Source Han Sans CN VF, Source Han Sans CN VF;
				font-weight: 500;
				font-size: 24rpx;
				color: #1C1C1E;
			}

			>.content {
				width: calc(100% - 240rpx);

				>.name {
					@extend .font-size-14, .font-color-black, .text-overflow, .font-w-400
				}

				>.time {
					color: #999999;
					@extend .font-size-12, .mt-8;
				}

				.btnStyle {
					width: 144rpx;
					height: 50rpx;
					background: #000000;
					border-radius: 50rpx;
					font-size: 24rpx;
					line-height: 50rpx;
				}
			}
		}

		/deep/.u-popup__content {
			background: #fff !important;
		}

		.schemeList {
			width: 100%;
			max-height: 60vh;
			overflow-y: scroll;


			>.item {
				width: 100%;
				min-height: 100rpx;
				@extend .flex-center-sb, .mt-8;

				.btnStyle {
					width: 112rpx;
					height: 50rpx;
					border-radius: 50rpx;
					line-height: 50rpx;
					font-size: 24rpx;
				}
			}
		}
	}
</style>